<template>
  <div class="home">
    <div :class="['procedureTask',arrowFlag ? 'isShowMore' : '']">
      <!-- 工序任务 -->
      <procedure-task @getChecked='getChecked' @refresh='refresh' @procedureTable='procedureTable'
        :procedureTaskList='procedureTaskList' @handleRadio='handleRadio' :detailReport='detailReport' :total="total"
        @filterList='filterList'>
      </procedure-task>
      <div :class="['arrow','iconfont',adjClass]" @click="arrowFlag = !arrowFlag" v-show="procedureTaskList.length && col > 1">
      </div>
    </div>
    <div class="orderInfo">
      <el-row :gutter="10">
        <el-col :span="18">
          <div class="info_left">
            <div class="progressList">
              <!-- 工单进度报表 -->
              <progress-list ref="progressList" :tableParams='tableParams' @getRadio='getRadio'></progress-list>
            </div>
            <!-- 常用报表入口 -->
            <div class="formEnter">
              <div class="title">常用报表入口</div>
              <div class="itemEnter">
                <el-row :gutter="10">
                  <el-col :span="6" v-for="(item, key) in useReportList" :key='key'>
                    <el-link type="primary" :underline="false" icon="el-icon-s-marketing" @click="useReport(item)">
                      {{ item.name }}</el-link>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="info_right">
            <!-- 绩效指标 -->
            <div class="kpi">
              <div class="title">绩效指标</div>
              <el-row :gutter="10">
                <el-col :span="12">
                  <div class="kpi_item">
                    <span>{{allPlanedNumber | formatNum}}</span>
                    <span>计划数</span>
                  </div>
                  <div class="kpi_item">
                    <span>{{workOrderNumber}}</span>
                    <span>工单数量</span>
                  </div>
                  <div class="kpi_item">
                    <span>{{averageProduce}}<span style="fontSize:12px">天</span></span>
                    <span>平均工单</span>
                    <span>生命周期</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="kpi_item">
                    <span style="color:rgb(2, 185, 128)">{{allCompletedNumber}}</span>
                    <span>完成数量</span>
                  </div>
                  <div class="kpi_item">
                    <span style="color:rgb(250, 173, 20)">{{badProductRate}}<span style="fontSize:12px">%</span></span>
                    <span>不良品率</span>
                  </div>
                  <div class="kpi_item">
                    <span style="color:rgb(255, 89, 80)">{{notFinished}}</span>
                    <span>超期</span>
                    <span>未完成工单</span>
                  </div>
                </el-col>
              </el-row>
            </div>
            <!-- 生产实时播报 -->
            <div class="productPlayder" v-loading="productLoading" element-loading-text="加载中"
              element-loading-background="rgba(250, 250, 250, 0.5)" element-loading-spinner="el-icon-loading">
              <div class="title">生产实时播报</div>
              <vue-seamless-scroll :data="listData" :class-option="classOption" class="playder_content">
                <div class="itemPlayder" v-for="(item,index) in listData" :key="index">
                  <div class="timeLine">
                    <span></span>
                    <span>{{item.time}}</span>
                  </div>
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">{{item.productCode}} | {{item.productName}} {{item.goodProduct}} 良品 /
                      {{item.badProduct}} 不良品</div>
                    <div class="description">
                      <div class="order">
                        <span>{{item.produceName}}</span>
                        <span>{{item.processName}}</span>
                      </div>
                      <div class="order">
                        <span>工单号：</span>
                        <span>{{item.workOrderCode}}</span>
                      </div>
                      <div class="order">
                        <span>产品信息：</span>
                        <span>{{item.productCode}} | {{item.productName}} {{item.goodProduct}} 良品 / {{item.badProduct}}
                          不良品</span>
                      </div>
                    </div>
                  </el-tooltip>
                </div>
                <el-empty :image-size="100" v-if="!listData.length"></el-empty>
              </vue-seamless-scroll>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {
    production,
    processList,
    produceReport,
    pmSet
  } from '@/api/homeController'
  import progressList from './progressList.vue'
  import procedureTask from './procedureTask.vue'
  export default {
    data() {
      return {
        listData: [],
        productLoading: false,
        allPlanedNumber: '',
        workOrderNumber: '',
        averageProduce: '',
        allCompletedNumber: '',
        badProductRate: '',
        notFinished: '',
        procedureTaskList: [],
        detailReport: [],
        show:[],
        total: 0,
        arrowFlag:false,
        col:0,
        homeParams: {
          containNotStart: 0, //是否包含未开始生产任务
          isDetail: 0, //默认0 点击工序任务进入dialog表格1
          type: 'today' //今天:'today' 昨天'yesterday' 本月'month'
        },
        tableParams: {
          type: 1,
          limit: 5,
          page: 1
        },
        radio: 1,
        // 常用报表入口
        useReportList: [{
            url: '/reportForm/outputStatistics',
            name: '当天产量统计-按成品',
            date: 'day',
            type: 'product'
          },
          {
            url: '/reportForm/outputStatistics',
            name: '当天产量统计-按工序和成品',
            date: 'day',
            type: 'process'
          },
          {
            url: '/reportForm/productForm',
            name: '今天员工报工统计',
            date: 'day',
          },
          {
            url: '/reportForm/irregularSpread',
            name: '当天不良品项分布',
            date: 'day',
          },
          {
            url: '/reportForm/outputStatistics',
            name: '当月产量统计-按成品',
            date: 'month',
            type: 'product'
          },
          {
            url: '/reportForm/outputStatistics',
            name: '当月产量统计-按工序和成品',
            date: 'month',
            type: 'process'
          },
          {
            url: '/reportForm/productForm',
            name: '本月员工报工统计',
            date: 'month',
          },
          {
            url: '/reportForm/irregularSpread',
            name: '当月不良品项分布',
            date: 'month',
          },
        ],
      }
    },
    components: {
      progressList,
      procedureTask
    },
    computed: {
      classOption() {
        return {
          waitTime: 0,
          step: 0.5,
          hoverStop: true,
          limitMoveNum: 3
        };
      },
      adjClass(){
        return this.arrowFlag ? 'icon-xiangshangshuangjiantou3' : 'icon-xiangxiashuangjiantou'
      }
    },
    mounted() {
      this.getProcessList(this.homeParams)
      this.getProduceReport()
      this.getProduction(this.homeParams)
      window.addEventListener('resize',this.throttle(e => {
        if(this.$route.path == '/home') this.getProcessList(this.homeParams)
      },1000))
    },
    methods: {
      //节流
      throttle(callback,wait){
        let start = 0
        return function(e){
          let now = Date.now()
          if(now - start >= wait){
            callback.call(this,e)
            start = now
          }
        }
      },
      //绩效指标 
      getProduction(data) {
        production(data).then(res => {
          if (res.code == 200) {
            this.allPlanedNumber = res.data.allPlanedNumber
            this.workOrderNumber = res.data.workOrderNumber
            this.averageProduce = res.data.averageProduce
            this.allCompletedNumber = res.data.allCompletedNumber
            this.badProductRate = res.data.badProductRate
            this.notFinished = res.data.notFinished
          }
        })
      },
      //工序任务
      getProcessList(data) {
        processList(data).then(res => {
          if (res.code = 200) {
            this.getPmSet({vos: []},res.data)
          }
        })
      },
      //工序设置 
      getPmSet(data,list) {
        pmSet(data,list).then(res => {
          if (res.code == 200) {
            let checkedList = []
            this.procedureTaskList = []
            res.data != null && res.data.vos.forEach((i,index) => {
              if(i.flag){
                  checkedList.push({
                    name:i.name,
                    flag:i.flag,
                    index
                  })
              }
            })
            this.handleCommon(list,checkedList)
          }
        })
      },
      //点击工序设置确认  工序任务列表变化
      filterList(checkedList){
        processList(this.homeParams).then(res => {
          if (res.code = 200) {
            this.procedureTaskList = []
            this.handleCommon(res.data,checkedList)
          }
        })
      },
      handleCommon(processList,checkedList){
          processList.forEach(i => {
            checkedList.forEach(k => {
              if(i.processName == k.name){
                i.index = k.index
                this.procedureTaskList = [...this.procedureTaskList,i]
              }
            })
          })
          this.procedureTaskList.sort((a, b) => a.index - b.index)
          // // //1920屏幕 工序任务 默认显示12个 其余都是8个 
          this.col = window.screen.width == 1920 ? this.procedureTaskList.length / 12 : this.procedureTaskList.length / 8 //求列数
      },
      //是否包含未开始任务
      getChecked(val) {
        this.homeParams.containNotStart = val
        this.getProcessList(this.homeParams)
      },
      //刷新
      refresh() {
        this.tableParams.type = this.radio
        this.getProduceReport()
        this.$refs.progressList.getSchedule(this.tableParams)
      },
      //工序任务详情表格
      procedureTable(val) {
        let data = {
          ...this.homeParams,
          ...val
        }
        data.isDetail = 1
        processList(data).then(res => {
          if (res.code = 200) {
            this.detailReport = res.data.records
            this.total = res.data.total
          }
        })
      },
      //实时播报
      getProduceReport() {
        this.productLoading = true
        produceReport().then(res => {
          if (res.code == 200) {
            this.listData = res.data
          }
          this.productLoading = false
        })
      },
      //获取工单进度报表类型值
      getRadio(val) {
        this.radio = val
      },
      //获取工序任务类型值
      handleRadio(val) {
        this.homeParams.type = val
        this.getProcessList(this.homeParams)
        this.getProduction(this.homeParams)
      },
      // 常用报表入口
      useReport(d) {
        this.$router.push({
          path: d.url,
          query: {
            node: d
          }
        })
      }
    },
  }
</script>

<style lang="less" scoped>
  .home {
    padding: 10px;
    overflow-y: auto;

    .procedureTask {
      position: relative;
      border-radius: 3px;
      box-shadow: rgb(0 0 0 / 6%) 2px 2px 6px 0px;

      margin-bottom: 10px;
        .arrow{
          position: absolute;
          left: 0;
          bottom: 0;
          cursor: pointer;
          background-color: #fff;
          width: 100%;
          height: 28px;
          line-height: 28px;
          text-align: center;
          font-size: 14px;
          color: #409EFF;
        }
    }

    @media only screen and (min-width: 1920px) {
      .procedureTask{
        height: calc(100vh - 587px);
      }
      .isShowMore {
        height: calc(100vh - 487px);
      }
    }

    @media only screen and (min-width: 1680px) and (max-width: 1919px) {
      .procedureTask{
        height: calc(100vh - 557px);
      }
      .isShowMore {
        height: calc(100vh - 457px);
      }
    }

    @media only screen and (min-width: 1440px) and (max-width: 1679px) {
      .procedureTask{
        height: calc(100vh - 437px);
      }
      .isShowMore {
        height: calc(100vh - 337px);
      }
    }

    @media only screen and (min-width: 1400px) and (max-width: 1439px) {
      .procedureTask{
        height: calc(100vh - 557px);
      }
      .isShowMore {
        height: calc(100vh - 457px);
      }
    }

    @media only screen and (min-width: 1360px) and (max-width: 1399px) {
      .procedureTask{
        height: calc(100vh - 375px);
      }
      .isShowMore {
        height: calc(100vh - 175px);
      }
    }

    .orderInfo {

      /deep/ .el-row,
      .el-col {
        height: 100%;
      }

      .info_left,
      .info_right {
        height: 100%;

        .progressList,
        .formEnter,
        .kpi,
        .productPlayder {
          height: 493px;
          border-radius: 3px;
          box-shadow: rgb(0 0 0 / 6%) 2px 2px 6px 0px;

          .title {
            color: #1f273d;
            font-size: 16px;
          }
        }

        .progressList {
          margin-bottom: 10px;
        }

        .formEnter {
          height: 150px;
          padding: 24px;

          .itemEnter {
            padding: 10px 0;

            .el-row {
              white-space: nowrap;

              /deep/ .el-col:nth-child(-n+4) {
                margin-bottom: 25px;
              }
            }

            /deep/ .el-icon-s-marketing {
              font-size: 20px;
            }
          }
        }

        .kpi {
          height: 293px;
          padding: 10px;
          margin-bottom: 10px;

          .el-row {
            padding: 10px;
          }

          .kpi_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 8px 0;
            background-color: #fafafa;
            margin-bottom: 16px;
            font-size: 24px;
            color: #1f273d;

            span:nth-of-type(n+2) {
              font-size: 12px;
              opacity: .3;
            }
          }
        }

        .productPlayder {
          padding: 10px;
          height: 352px;

          .title {
            margin-bottom: 13px;
          }

          .playder_content {
            overflow: hidden;
            height: 295px;

            .el-empty {
              height: 295px;
            }
          }

          .itemPlayder {
            padding: 10px;

            .timeLine {
              margin-bottom: 8px;

              span:nth-child(1) {
                display: inline-block;
                width: 10px;
                height: 10px;
                background-color: #fff;
                border-radius: 50%;
                border: 2px solid #409EFF;
                margin-right: 18px;
              }

              span:nth-child(2) {
                font-size: 12px;
              }
            }

            .description {
              padding: 10px;
              color: rgb(155, 155, 155);
              background-color: rgb(250, 250, 250);
              border-radius: 3px;
              font-size: 12px;

              .order {
                margin-bottom: 10px;
              }

              .order:last-child {
                margin-bottom: 0;
              }

              .order:nth-child(1) {
                span:nth-child(1) {
                  margin-right: 5px;
                }

                span {
                  color: black;
                }
              }
            }
          }
        }
      }
    }
  }
</style>